<script setup>
/*
1:vite:脚手架不同于webpack
   重点：快(运行时不再是全量打包，按需打包模式)
2:创建脚手架： npm init vue   
3:vue3组件与vue2区别
    template:可以有兄弟标签
    script:vue3支持vue2写法，只是多了一个组合api写法
4：setup
    它是一个入口函数，
    在beforeCreate前执行
    它没有this(undefined)
    template内要使用什么，setup函数最后就return什么
 5：setup语法糖
     1：去掉了export default {}
     2:去掉了setup(){}
     3:去掉了return {}
     <script setup>
     它会主动retun 所有内部的全局属性与方法
 6：reactive:定义响应式数据
    用法：
       1:导入
       2：const user=reactive(复杂数据类型{age:18})
       3:访问与修改  user.age
    注意点:reactive只支持复杂数据类型数据(array,object,function)
 7: ref:定义响应式数据
     1:导入
     2:const xxx = ref(可以使用任意数据(999) )
     3:访问与修改
         html: {{ xxx }}
         js:  xxx.value
  8:计算属性：依赖一个或者多个值产生一个新的值（值都是响应式数据）
    用法
      1：导入
      2：定义
         const xxx =computed(()=>{
            return 新的值
         })
       3:访问：
          html:{{xxx}}
          js:xxx.value
  9:watch:监听数据变化后执行一个方法
    用法：
       1：导入  
       2:
         基本使用
          const stop = watch(需要监听的响应式数据,(newVal,oldVal)=>{},{deep,immediate})
          stop:调用后会停止监听的方法
         监听多个数据
           需要监听的响应式数据:[数据a,数据b]
         监听响应式数据中的某个属性
           需要监听的响应式数据：()=>响应式数据.属性
           deep:响应式数据.属性如果是复杂数据类型需要监听全部变化 时要加deep:true
  生命周期
     setup替换了以前的beforeCreate与created
     销毁期更名了
        beforeDestroy ====>  onBeforeUnmount
        destroyed     ====>  onUnmounted
     其它所有的生命周期都在前面加了一个on
       如  mounted===>onMounted

     用法：
        1：导入  
        2：使用
           onMounted(()=>{
              ......
           })
           onMounted(()=>{
              ......
           })
   ref:
      1:定义响应式数据
      2：获取原生标签dom
         a:定义一个空的响应式数据
            const divdom=ref(null/undefined)
         b:标签上绑定ref
            <div ref="divdom"></div>
         c:获取dom
            divdom.value
      3:获取组件标签实例 
          a:定义一个空的响应式数据
            const xxxCom=ref(null/undefined)
          b:组件标签上绑定ref
            <xxx ref="xxxCom"  />
          c:xxx组件内暴露出给实例访问的属性或者方法
            defineExpose({
              fn
            })
          d:父组件调用子组件暴露的方法或者属性
            xxxCom.value.fn()
    父子组件传值
       父传子
          <son :num='appNum' />
          const props=defineProps({
             num:{type,required,default,validator}
          })
          使用：
            html {{  num  }}
            js: props.num
       子传父 
          <son  @fn="appFn"  />
          son子组件内接收 
          const emits=defineEmits(['fn'])
          emits('fn',实参值)
        
    




















*/
</script>

<template>
  <div class="app-page">app</div>
</template>

<style scoped></style>
